:root {
	--gray0: #fff;
	--gray1: hsl(0, 0%, 99%);
	--gray2: hsl(0, 0%, 97.3%);
	--gray3: hsl(0, 0%, 95.1%);
	--gray4: hsl(0, 0%, 93%);
	--gray5: hsl(0, 0%, 90.9%);
	--gray6: hsl(0, 0%, 88.7%);
	--gray7: hsl(0, 0%, 85.8%);
	--gray8: hsl(0, 0%, 78%);
	--gray9: hsl(0, 0%, 56.1%);
	--gray10: hsl(0, 0%, 52.3%);
	--gray11: hsl(0, 0%, 43.5%);
	--gray12: hsl(0, 0%, 9%);
	--hover: rgb(40, 40, 40);
	--border-radius: 6px;
	--font-sans:
		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
		Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
		Segoe UI Symbol, Noto Color Emoji;
	--font-mono:
		'SF Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
		Courier New, monospace;
}

::selection {
	background: var(--gray7);
}

.container {
	max-width: 610px;
	margin: 0 auto;
	padding-left: max(var(--side-padding), env(safe-area-inset-left));
	padding-right: max(var(--side-padding), env(safe-area-inset-right));
}

body {
	--side-padding: 16px;
	margin: 0;
	padding: 0;
	padding-top: 100px;
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

* {
	touch-action: manipulation;
}

h1,
p {
	color: var(--gray12);
	line-height: 25px;
}

h2 {
	font-size: 16px;
	color: var(--gray12);
	font-weight: 500;
}

h2 + p {
	margin-top: -4px;
}

p {
	font-size: 16px;
}

a {
	color: inherit;
	text-decoration-color: var(--gray10);
	text-underline-position: from-font;
	text-decoration-thickness: 1.25px;
}

code {
	font-size: 13px;
	line-height: 28px;
	padding: 2px 3.6px;
	/* border: 1px solid var(--gray3);
  background: var(--gray4); */
	font-family: var(--font-mono);
	border-radius: 6px;
}

.content {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin-top: 96px;
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	overflow: auto;
	margin: 0 calc(-1 * var(--side-padding));
	padding: 4px var(--side-padding);
	position: relative;
}

.button {
	padding: 8px 12px;
	margin: 0;
	background: var(--gray1);
	border: 1px solid var(--gray3);
	white-space: nowrap;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	font-family: var(--font-sans);
	cursor: pointer;
	color: var(--gray12);
	transition:
		border-color 200ms,
		background 200ms,
		box-shadow 200ms;
}

.button:hover {
	background: var(--gray2);
	border-color: var(--gray4);
}

.button[data-active='true'] {
	background: var(--gray3);
	border-color: var(--gray7);
}

.button:focus-visible {
	outline: none;
	box-shadow:
		0px 0px 0px 1px rgba(0, 0, 0, 0.06),
		0px 1px 0px 0px rgba(0, 0, 0, 0.08),
		0px 2px 2px 0px rgba(0, 0, 0, 0.04),
		0px 3px 3px 0px rgba(0, 0, 0, 0.02),
		0px 4px 4px 0px rgba(0, 0, 0, 0.01),
		0 0 0 2px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
	.buttons {
		mask-image: linear-gradient(
			to right,
			transparent,
			black 16px,
			black calc(100% - 16px),
			transparent
		);
	}
}
